<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
				xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8"/>
  <title>角色列表</title>
  <link rel="stylesheet" href="/css/layui.css" media="all"/>
</head>
<body>

<br/>
<div class="layui-btn-group otherOperation">
  <button class="layui-btn" data-type="addRole">添加角色</button>
</div>


<div class="form-group" id="addRole" hidden="hidden">
<form class="layui-form" action="">
<br/>
  <div class="layui-form-item">
    <label class="layui-form-label">角色名称</label>
    <div class="layui-input-inline">
      <input type="text"  id="a-form-roleName" name="roleName" placeholder="请输入角色名称" required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">角色描述</label>
    <div class="layui-input-inline">
      <input type="text"  id="a-form-description" name="description" placeholder="请输入角色描述" required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
    </div>
  </div>
  <label class="layui-form-label">状态</label>
  <div class="layui-input-block">
	  <input type="checkbox" name="available" class="isShow" title="禁用"/>
  </div>
  
  
  <button class="layui-btn layui-hide" lay-submit="" lay-filter="subAddRole">确认添加</button>
</form>  
</div>


<table class="layui-hide" id="userTable" lay-filter="tableFilter"></table>
 
<script src="/layui.js"></script>
<script>
/*<![CDATA[*/
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#userTable'
    ,height: 'full'                   
    ,url: '/admin/getRole' //数据接口
    ,request: {
    		  pageName: 'begin' //页码的参数名称，默认：page
    		  ,limitName: 'length' //每页数据量的参数名，默认：limit
    		  }
    ,page: true //开启分页
    ,even: true
    ,cols: [[ //表头
      {field: 'roleName', title: '角色名称', width:250, align:'center'}
      ,{field: 'description', title: '角色描述', width:250, align:'center'}
      ,{field: 'available', title: '状态', width:155, align:'center'}
      ,{fixed: 'right', title: '操作',width:250, align:'center', toolbar: '#handler'} //这里的toolbar值是模板元素的选择器
    ]]
    ,id: 'userReload'
   	,done: function(res, page, count){
           //如果是异步请求数据方式，res即为你接口返回的信息。  
           //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度  
           
           $("[data-field='available']").children().each(function(){
        	   if($(this).text()=='1'){
                   $(this).text("正常");
               }
        	   if($(this).text()=='0'){
                   $(this).text("禁用");
               }
           })
   } 
  });
    
    //条件查询
	var $ = layui.$, active = {
		reload : function() {
			
			/*]]>*/
			
			//执行重载
			table.reload('userReload', {
				page : {
					curr : 1
				//重新从第 1 页开始
				},
				where : {
						jsonString : jsonString
				}
			});
		},addRole: function(){//添加角色
			var openIndex = layer.open({
		        type: 1,
		        title: '添加角色',
		        area : ['400px' , '300px'], 
		        scrollbar: false,//禁止浏览器滚动
		        closeBtn: 2,
		        content: $("#addRole"),
		        btn: ['确认添加', '取消'],
		        yes: function(index,layero){
		        	layero.find('button[lay-filter=subAddRole]').click();//触发form提交按钮
		        },
		        btn2: function(){
		          layer.close(openIndex);
		        }
	        });
		    //提交按钮
		    layui.use(['form', 'jquery'], function(){
			  var form = layui.form;
			  $=layui.jquery;
			  form.on('submit(subAddRole)', function(data){
				  var isShow = data.field.available=="on" ? "0" : "1";
				  $.ajax({
				    	url:"/adminApi/book",
				    	data:JSON.stringify(data.field),
				    	type:"PUT",
				    	processData:false,
				    	contentType:"application/json",
				    	success:function(rdata){
				    		//同步更新缓存对应的值
				    		$(".layui-laypage-btn").click();
						    layer.msg('添加图书成功')
				    		layer.close(openIndex);
						    $("#addBook :input").val("");
						    $("#a-form-bookimg").attr('src',"");
						    form.render('select');
				    	},
				    	error:function(rdata){
				    		layer.alert('请重试..', {
							      title: '错误提示'
							    });
				    	}
				    });
				    return false;
			  });
			});
		}
	};

	$('.userDiv .layui-btn').on('click', function() {
		var type = $(this).data('type');
		active[type] ? active[type].call(this) : '';
	});
	
	$('.otherOperation .layui-btn').on('click', function(){
	    var type = $(this).data('type');
	    active[type] ? active[type].call(this) : '';
  });
	
	//操作绑定
	table.on('tool(tableFilter)', function(obj){ //注：tool是固定的工具条事件名，tableFilter是table原始容器的属性 lay-filter="对应的值"
		  var data = obj.data; //获得当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  var tr = obj.tr; //获得当前行 tr 的DOM对象
		 
		  if(layEvent === 'edit'){
			  var stateIndex = layer.msg('设置账号状态', {
							        time: 20000,
							        closeBtn: 2,
							        btn: ['正常', '锁定', '未激活', '禁言'],
								    yes: function(index,layero){
								    	if(data.state==1){
								    		layer.msg('状态未改变');
								    		return ;
								    	}
								    	updateUser(1);
							        },
							        btn2: function(){
							        	if(data.state==2){
								    		layer.msg('状态未改变');
								    		return ;
								    	}
							        	updateUser(2);
							        },
							        btn3: function(){
							        	if(data.state==0){
								    		layer.msg('状态未改变');
								    		return ;
								    	}
							        	updateUser(0);  
							        },
							        btn4: function(){
							        	if(data.state==3){
								    		layer.msg('状态未改变');
								    		return ;
								    	}
							        	updateUser(3); 
							        }
							      });
			  function updateUser(state){
				  var id = data.id;
				  $.ajax({
	        	        url: "/admin/updateUser/",
	        	        type: "POST",
	        	        data:{id:id,state:state},
	        	        success: function (d) {
	        	        	if(d.rspCode=="000000"){
	        	        		obj.update({
								      state:state,
								    });
		        			    layer.close(stateIndex);
		        			    layer.msg('操作成功');
	        	        	}else{
		        			    layer.msg('操作失败');
	        	        	}
	        	        },
	        	        error: function (d) {
	        	        	layer.alert('请重试..', {
							      title: '错误提示'
							    });
	        	        }
	        	   });
			  }
		  }
		});
	
});
</script>

</body>

<script type="text/html" id="handler">
    <a class="layui-btn layui-btn-xs" style="background-color: #A900B7;" lay-event="edit">编辑</a>
	{{#  if(d.id != 1){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	{{#  } }}
</script>
</html>